<template>
  <!-- 复选框 模板 -->
  <div class="tags">
    <el-row>
      <el-col :span="6">
        <!-- 实现全选、全不选 -->
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >
          Select All
        </el-checkbox>
      </el-col>
    </el-row>
    <div style="margin: 15px 0"></div>
    <el-checkbox-group
      v-model="checkedSensors"
      @change="handleCheckedSensorsChange"
      align="left"
    >
      <el-row>
        <el-checkbox v-for="sensor in Options" :label="sensor" :key="sensor">
          <el-col :span="6">
            <div id="sensor-block" :span="6">{{ sensor }}</div>
          </el-col>
        </el-checkbox>
      </el-row>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: "filterModel",
  props: {
    Options: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      checkAll: false,
      checkedSensors: [],
      isIndeterminate: true,
    };
  },
  methods: {
    // 是否全选
    handleCheckAllChange(val) {
      this.checkedSensors = val ? this.Options : [];
      this.isIndeterminate = false;
      this.$emit("filterSelection", this.checkedSensors);
    },
    // 检测选项改变
    handleCheckedSensorsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.Options.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.Options.length;
      //传值
      this.$emit("filterSelection", this.checkedSensors);
    },
  },
};
</script>

<style scoped>
.sensor-block,
.el-col {
  text-align: start;
}
</style>
